<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-button type="warning" v-model="add" @click="dialogFormVisible = true">添加订单</el-button>
    <el-dialog title="添加订单" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="订单编号" :label-width="formLabelWidth">
                <el-input v-model="form.orderId" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="订单类型" :label-width="formLabelWidth">
                <el-input v-model="form.orderType" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="产品名称" :label-width="formLabelWidth">
                <el-input v-model="form.productId" autocomplete="off"></el-input>
                </el-select>
            </el-form-item>
            <el-form-item label="客户名称" :label-width="formLabelWidth">
                <el-input v-model="form.customId" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="支付方式" :label-width="formLabelWidth">
                <el-input v-model="form.payType" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="交易金额" :label-width="formLabelWidth">
                <el-input v-model="form.money" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="交易时间" :label-width="formLabelWidth">
                <el-date-picker
                        v-model="form.dealTime"
                        type="datetime"
                        placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="数量" :label-width="formLabelWidth">
                <el-input v-model="form.number" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="订单状态" :label-width="formLabelWidth">
                <el-input v-model="form.orderStatus" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="说明" :label-width="formLabelWidth">
                <el-input v-model="form.explain" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="操作人" :label-width="formLabelWidth">
                <el-input v-model="form.operator" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="生产计划编号" :label-width="formLabelWidth">
                <el-input v-model="form.productPlanNo" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="责任产线" :label-width="formLabelWidth">
                <el-input v-model="form.productLineId" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="计划生产日期" :label-width="formLabelWidth">
                <el-date-picker
                        v-model="form.productPlanTime"
                        type="datetime"
                        placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="计划结束生产日期" :label-width="formLabelWidth">
                <el-date-picker
                        v-model="form.productPlanOvertime"
                        type="datetime"
                        placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="form.remark" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="生产状态" :label-width="formLabelWidth">
                <el-input v-model="form.productStatus" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="打印机" :label-width="formLabelWidth">
                <el-input v-model="form.printer" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="生产时间" :label-width="formLabelWidth">
                <el-date-picker
                        v-model="form.productTime"
                        type="datetime"
                        placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="激光码" :label-width="formLabelWidth">
                <el-input v-model="form.laserCode" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="add">确 定</el-button>
        </div>
    </el-dialog>


    订单编号:
    <el-input v-model="input" placeholder="输入订单编号"></el-input>
    交易时间:
    <el-date-picker
            v-model="value1"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期时间">
    </el-date-picker>
    <el-button type="primary" icon="el-icon-search" @click="find">查询</el-button>
<!--    搜索:-->
<!--    <el-input v-model="ss" @blur="blur" placeholder="输入排单状态"></el-input>-->

    <el-table
            :data="produceOrder"
            style="width: 100%">
        <el-table-column
                label="序号"
                width="180">

            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.id }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="订单编号"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.orderId }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="订单类型"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.orderType }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="产品名称"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.product.pname }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="客户名称"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.customId }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="支付方式"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.payType }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="交易金额"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.money }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="交易时间"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.dealTime }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="所属分类"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.productId }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="数量"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.number }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="状态"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.orderStatus }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="说明"
                width="180">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.explain }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button type="text" @click="handleCommand(scope.row)">审核</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="block">
        <el-pagination
                @current-change="handleCurrentChange"
                layout="total, prev, pager, next"
                :total="produceOrder.total">
        </el-pagination>
    </div>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            produceOrder: "",
            input: null,
            value1: '',
            form: {orderId:'',orderType: '', productId: '', customId: '', payType: '', money: '', dealTime: '',number:'',orderStatus:'',explain:'',operator:'',productPlanNo:'',productLineId:'',productPlanTime:'',productPlanOvertime:'',remark:'',productStatus:'',printer:'',productTime:'',laserCode:''},
            formLabelWidth: '120px',
            value1: null,
            ss: '',
            current:0,
            dialogFormVisible: false,
        },
        methods: {
            page: function () {
                axios.get('/orders/page/'+this.current).then(res => {
                    this.produceOrder = res.data.data
                })
            },
            // blur() {
            //     axios.get('order/byId/' + this.input).then(res => {
            //         this.produceOrder.data = res.data
            //     })
            // },

            add() {
                  let tOrder = JSON.parse(JSON.stringify(this.form));
                axios.post('/order/add',tOrder).then(res => {
                    if (res.data=="ok"){
                        this.$message("添加成功！")
                        this.dialogFormVisible = false;
                        this.page()
                    }
                })
            },
            find(){
                axios.get('/order/'+this.input+"/"+this.value1).then(res =>{
                    this.produceOrder=res.data;
                })
            },
            handleCommand(row) {
                if (row.orderStatus!="-1"){
                    this.$message("不能修改")
                }else {
                    axios.put("/order/"+row.id+"/"+row.orderStatus)
                        .then(res=>{
                            if (res.data=="ok"){
                                this.$message("修改成功")
                                this.page()
                            }
                        })
                }

            },
            handleCurrentChange(row) {
                this.current=row
                this.page()
            }
        },
        mounted() {
            this.page()
        }
    })
</script>
</body>
</html>